<template>
  <div>
    <div class="margin border_blue">
      <div slot="header" class="clearfix text-left color_blue padding-sm">
        <div>
          <template v-if="amoebaPriceChannelRecord">
            历史价格查看->文件名：{{
              amoebaPriceChannelRecord.fileName
            }}
            &emsp;操作人：{{
              userMap[amoebaPriceChannelRecord.cuser]
            }}
            &emsp;上传时间：{{ amoebaPriceChannelRecord.cdate }}
          </template>
        </div>
      </div>
      <el-card shadow="never" class="table-container">
        <table
          border="1"
          cellpadding="2"
          cellspacing="0"
          style="table-layout:fixed;"
        >
          <thead>
            <th>渠道名称</th>
            <th>国内分区</th>
            <template v-for="(item, index) in amoebaChannelSubjects">
              <th>{{ item.showName }}</th>
            </template>
          </thead>
          <tbody>
            <template v-for="(item, index) in amoebaChannels">
              <tr
                v-for="(m, i) in item.amoebaChannelZones"
                class="el-table__row"
              >
                <!-- 第1列每个学生只需要展示1次 -->
                <td v-if="i == 0" :rowspan="item.amoebaChannelZones.length">
                  <span> {{ channelMap[item.id] }}</span>
                </td>
                <!-- 第2列每个学生只需要展示1次 -->
                <td>
                  <template
                    v-for="(item1, izone) in m.amoebaChannelZoneDetails"
                  >
                    <template v-if="izone != 0">
                      ,
                    </template>
                    <template v-if="item1.countryId">
                      <span> {{ countryMap[item1.countryId] }}</span>
                    </template>
                    <template v-if="item1.stateId">
                      <span> {{ provinceMap[item1.stateId] }}</span>
                    </template>
                  </template>
                </td>
                <td v-for="(item2, index2) in amoebaChannelSubjects">
                  <template
                    v-if="
                      item.channelCalculateFormulaMap &&
                        item.channelCalculateFormulaMap[`${m.id}_${item2.id}`]
                    "
                  >
                    <span>
                      {{
                        item.channelCalculateFormulaMap[m.id + "_" + item2.id]
                          .formula
                      }}
                    </span>
                  </template>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
export default {
  data() {
    return {
      amoebaChannelSubjects: [{}],
      amoebaChannels: [],
      channelMap: {},
      provinceMap: {},
      countryMap: {},
      userMap: {},
      amoebaPriceChannelRecordId: "",
      amoebaPriceChannelRecord: {}
    };
  },
  mounted() {
    this.autoInitData();
  },
  methods: {
    autoInitData() {
      ajax("showAmoebaChannelPrice", {
        amoebaPriceChannelRecordId: this.$route.query.id
      })
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            console.log(data);
            this.amoebaChannelSubjects = data.amoebaChannelSubjects;
            this.amoebaChannels = data.amoebaChannels;
            this.channelMap = data.channelMap;
            this.provinceMap = data.provinceMap;
            this.countryMap = data.countryMap;
            this.amoebaPriceChannelRecord = data.amoebaPriceChannelRecord;
            this.userMap = data.userMap;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
.color_blue {
  background-color: #d9edf7;
  color: #31708f;
  background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}
.border_blue {
  border: 1px solid #bce8f1;
  border-radius: 5px;
}
table {
  min-width: 100%;
}
td {
  min-width: 100px;
  padding: 6px;
  margin: 6px;
}
tbody {
}
th {
  min-width: 100px;
  font-size: larger;
  padding: 6px;
  margin: 6px;
}
.table-container {
  overflow: auto;
  display: block;
}
</style>
